<template>
    <div :class="minScreen ? 'about-static' : 'about'">
        <div class="about-fixed">
            <div class="about-scroll" :style="'transform:translate3d(0,-' + scrollDivY + 'px,0)'">
                <section class="about-header">
                    <div class="about-header-title">
                        <h2><strong>Our&nbsp;</strong>story</h2>
                        <div class="about-bg-circular">
                            <div class="circular">1</div>
                            <div class="circular">2</div>
                            <div class="circular">3</div>
                            <div class="circular">4</div>
                            <div class="circular">5</div>
                            <div class="circular">6</div>
                        </div>
                    </div>
                    <div class="about-header-title-content">
                        <!-- <h3><strong>Our&nbsp;</strong>story</h3> -->
                        <p>
                            We started as a wholesale apparel manufacturer in 2013 and set up our first custom clothing
                            factory in Wuxi, China's textile industry hub. Over the past nine years, we have served more
                            than 2,000 international clothing brands and gained a reputation for our quality products.
                            In 2019, our subsidiary company, PODpartner, was established to meet the rising market needs
                            for print-on-demand services. Today, PODpartner has become a leading wholesale clothing
                            supplier that provides print-on-demand and dropshipping services worldwide.
                        </p>
                        <cite>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-1.png" alt="">
                            </figure>
                            <p>Founded with an innovative spirit, PODpartner aims to be a destination where merchants
                                can design their clothing with infinite creative liberty, fulfill and monetize their
                                vision with maximum efficiency and profits, and consequently increase their brands'
                                competitive edges. We value our customers' experience with us and strive to go beyond
                                their expectations. Our consistent, high-quality supply brings trust and sustainability
                                to every partnership.</p>
                        </cite>
                        <ul>
                            <li>
                                <h4>{{ num_list[0] }}</h4>
                                <p>years of clothing manufacturing<br /> experience</p>
                            </li>
                            <li>
                                <h4>{{ num_list[1] }}</h4>
                                <p>in-house factories</p>
                            </li>
                            <li>
                                <h4>{{ getStrByNum(num_list[2]) }}+</h4>
                                <p>sqm² production area</p>
                            </li>
                            <li>
                                <h4>{{ num_list[3] }}</h4>
                                <p>printing and embroidery machines</p>
                            </li>
                            <li>
                                <h4>{{ getStrByNum(num_list[4]) }}+</h4>
                                <p>clothing brands served</p>
                            </li>
                            <li>
                                <h4>{{ getStrByNum(num_list[5]) }}+</h4>
                                <p>monthly order volume</p>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="about-different">
                    <dl>
                        <dt>What Makes Us Different?</dt>
                        <dd>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-2-1.png" alt="">
                            </figure>
                            <h4>Inspirational Clothing Catalog</h4>
                            <p>• Unique and trendy fashion styles</p>
                            <p>• An extensive selection of apparel types</p>
                            <p>• Ongoing expansion of clothing options</p>
                        </dd>
                        <dd>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-2-2.png" alt="">
                            </figure>
                            <h4>Creativity-friendly</h4>
                            <p>• DTG + embroidery supported</p>
                            <p>• Largest design area: 16” x 21”</p>
                            <p>• Flexible and intuitive Design Creator</p>
                        </dd>
                        <dd>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-2-3.png" alt="">
                            </figure>
                            <h4>Higher Quality, Lower Prices</h4>
                            <p>• 100% premium cotton fabric</p>
                            <p>• High-performance in-house factory</p>
                            <p>• Low-margin pricing</p>
                        </dd>
                        <dd>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-2-4.png" alt="">
                            </figure>
                            <h4>Outstanding Tech Support</h4>
                            <p>• Highly responsive IT team</p>
                            <p>• Customized order processing solutions</p>
                            <p>• Continuous innovations to boost efficiency</p>
                        </dd>
                        <dd>
                            <figure>
                                <img src="https://img.podpartner.com/static/images-20230202/about-2-5.png" alt="">
                            </figure>
                            <h4>Long-lasting Partnerships</h4>
                            <p>• Consistent product & service quality</p>
                            <p>• Rapid Restocking</p>
                            <p>• Stable prices</p>
                        </dd>
                    </dl>
                </section>
                <section class="about-history">
                    <article>
                        <h2>Our Goals</h2>
                        <h3>A Wider Range of Apparel</h3>
                        <p>We aspire to provide you with a comprehensive and up-to-date catalog of the latest fashion
                            styles across all apparel categories. This will give you the flexibility to develop your
                            clothing line with a multitude of choices.</p>
                        <h3>More Creative Freedom</h3>
                        <p>We are committed to continually refining our Design Creator to satisfy your most creative
                            urges, and to offer a variety of printing methods and decorative crafts to help bring your
                            designs to life.</p>
                        <h3>Faster Fulfillment</h3>
                        <p>We envision a future where the entire fulfillment process is greatly accelerated through our
                            state-of-the-art technology and localized of manufacturing. </p>
                    </article>
                    <div class="about-history-list">
                        <dl>
                            <dt content='PODpartner was established'>20<strong>19</strong></dt>
                            <dt>20<strong>21</strong></dt>
                            <dd>
                                <strong>June</strong>
                                <p>We built our in-house POD factory</p>
                            </dd>
                            <dd>
                                <strong>Oct.</strong>
                                <p>We launched our website</p>
                            </dd>
                            <dd>
                                <strong>Nov.</strong>
                                <p>Three more trendy clothing styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Dec.</strong>
                                <p>Multiple-design-placement feature was enabled</p>
                            </dd>
                            <dd>
                                <strong>Dec.</strong>
                                <p>Two more basic clothing styles were added to our catalog</p>
                            </dd>
                            <dt>20<strong>22</strong></dt>
                            <dd>
                                <strong>Jan.</strong>
                                <p>We were integrated with Shopify</p>
                            </dd>
                            <dd>
                                <strong>Feb.</strong>
                                <p>Our factory had two new production lines</p>
                            </dd>
                            <dd>
                                <strong>Mar.</strong>
                                <p>Two more trendy fashion styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Apr.</strong>
                                <p>We were integrated with Etsy</p>
                            </dd>
                            <dd>
                                <strong>Apr.</strong>
                                <p>We started collaborating with more reliable couriers</p>
                            </dd>
                            <dd>
                                <strong>May</strong>
                                <p>Two more trendy fashion styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>May</strong>
                                <p>Branded neck label customization became available</p>
                            </dd>
                            <dd>
                                <strong>June</strong>
                                <p>We were integrated with Wix</p>
                            </dd>
                            <dd>
                                <strong>July</strong>
                                <p>Custom Layer feature was enabled</p>
                            </dd>
                            <dd>
                                <strong>July</strong>
                                <p>Five more trendy styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Aug.</strong>
                                <p>Two more basic styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Aug.</strong>
                                <p>We were integrated with WooCommerce</p>
                            </dd>
                            <dd>
                                <strong>Sept.</strong>
                                <p>We were integrated with Squarespace</p>
                            </dd>
                            <dd>
                                <strong>Sept.</strong>
                                <p>Mockup/model image download became available</p>
                            </dd>
                            <dd>
                                <strong>Nov.</strong>
                                <p>Eight new trendy styles were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Dec.</strong>
                                <p>The bottoms category was added to our catalog</p>
                            </dd>
                            <dt>20<strong>23</strong></dt>
                            <dd>
                                <strong>Jan.</strong>
                                <p>Product detail page was updated with print guide, dimension diagram, and inventory
                                    chart</p>
                            </dd>
                            <dd>
                                <strong>Mar.</strong>
                                <p>Nine more trendy tops were added to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Mar.</strong>
                                <p>Product bundle feature was launched</p>
                            </dd>
                            <dd>
                                <strong>Mar.</strong>
                                <p>Shorts were introduced to our catalog</p>
                            </dd>
                            <dd>
                                <strong>Mar.</strong>
                                <p>
                                    Expanded customer service team
                                    Loyalty program discount display added
                                    Introduced new styles, including shorts
                                </p>
                            </dd>

                            <dd>
                                <strong>Apr.</strong>
                                <p>Added product bundle feature and multi-currency display</p>
                            </dd>

                            <dd>
                                <strong>July</strong>
                                <p>Capacity Expansion</p>
                            </dd>
                            <dd>
                                <strong>Aug.</strong>
                                <p>Added flat lay mockup options</p>
                            </dd>
                            <dd>
                                <strong>Oct.</strong>
                                <p>Partnering with more logistics companies</p>
                            </dd>
                            <dt>20<strong>24</strong></dt>
                            <dd>
                                <strong>July.</strong>
                                <p>
                                    Launched embroidery service<br />
                                    Supported combination of DTG and embroidery
                                </p>
                            </dd>
                        </dl>
                        <div class="about-history-list-mask" />
                    </div>
                </section>
                <section class="about-culture">
                    <h2>Our <br> Culture</h2>
                    <div class="about-bg-circular">
                        <div class="circular">
                            <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-1.png"
                                        alt=""></figure>
                                <p>Passionate</p>
                            </cite>
                        </div>
                        <div class="circular">
                            <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-2.png"
                                        alt=""></figure>
                                <p>Innovative</p>
                            </cite>
                        </div>
                        <div class="circular">
                            <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-3.png"
                                        alt=""></figure>
                                <p>Reliable</p>
                            </cite>
                        </div>
                        <div class="circular">
                            <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-4.png"
                                        alt=""></figure>
                                <p>Friendly</p>
                            </cite>
                        </div>
                        <div class="circular">
                            <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-5.png"
                                        alt=""></figure>
                                <p>Extraordinary</p>
                            </cite>
                        </div>
                        <div class="circular p-last-color"> <cite>
                                <figure><img src="https://img.podpartner.com/static/images-20230202/about-5-6.png"
                                        alt=""></figure>
                                <p>Stimulating</p>
                            </cite>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="empty" />
        <section class="about-environment">
            <cite>
                <figure><img src="https://img.podpartner.com/static/images-20230202/about-6-1.png" alt=""></figure>
                <span>
                    PODpartner provides an encouraging environment where we can tap into our
                    talents, follow our passion, and pursue excellence. Opinions are valued with respect,
                    and ideas are voiced with confidence. The flexibility and equality in our workplace empower
                    everyone, allowing us to be as creative and innovative as we can be. Here, we are not just coworkers
                    but more like a family supporting each other with trust and care. It is the inspiring traits of each
                    individual that build our great team dynamics and help us grow as a whole.
                </span>
            </cite>
            <div class="about-photo-wall">
                <!-- <img src="https://img.podpartner.com/static/svgs-20230202/photo-wall-bg.svg" alt=""> -->
                <ul>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-1.png" alt="">
                        </figure>
                        <h4>Mictm</h4>
                        <p>CEO</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-2.png" alt="">
                        </figure>
                        <h4>William</h4>
                        <p>R&D Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-3.png" alt="">
                        </figure>
                        <h4>Robinson</h4>
                        <p>Systems Engineer</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-13.png" alt="">
                        </figure>
                        <h4>Shawn</h4>
                        <p>Product Director</p>
                    </li>

                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230328/photo-wall-5.png" alt="">
                        </figure>
                        <h4>Annice</h4>
                        <p>HR Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-4.png" alt="">
                        </figure>
                        <h4>Webpoin</h4>
                        <p>Project Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-6.png" alt="">
                        </figure>
                        <h4>Brett</h4>
                        <p>Technical Engineer</p>
                    </li>

                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230328/photo-wall-8.png" alt="">
                        </figure>
                        <h4>Freedom</h4>
                        <p>Production Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-9.png" alt="">
                        </figure>
                        <h4>Jekita</h4>
                        <p>Sales Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-10.png" alt="">
                        </figure>
                        <h4>Mike</h4>
                        <p>Product Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-11.png" alt="">
                        </figure>
                        <h4>Tina</h4>
                        <p>Finance Manager</p>
                    </li>
                    <li>
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/photo-wall-12.png" alt="">
                        </figure>
                        <h4>Liu Chan</h4>
                        <p>Design Director</p>
                    </li>
                </ul>
            </div>
        </section>
        <section class="about-comment">
            <h2>Testimonials</h2>
            <div class="about-comment-content">
                <!-- {'comment-tab-show':comment_active == 1,'comment-tab-hidden':old_comment_active==8||old_comment_active==2} -->
                <div class="about-comment-content-tab" :class="getCommentClass(1)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-1.png" alt="">
                    </figure>
                    <h3>Nerdy Ink Apparel</h3>
                    <h4>Shopify seller</h4>
                    <p>This app is absolutely AWESOME! They have affordable high-quality products and the fulfillment is
                        super fast! They are still brand new, so there are still a lot of things they need to add, but
                        I'm sure they will make this even better over time! This company has big potential!</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(2)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-2.png" alt="">
                    </figure>
                    <h3>deprxst</h3>
                    <h4>Instagram user</h4>
                    <p>Said for years a streetwear dedicated POD service needed to exist. Discovered you guys this year
                        and my dream has come true.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(3)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-3.png" alt="">
                    </figure>
                    <h3>VilleMontre</h3>
                    <h4>Shopify seller</h4>
                    <p>Product Quality is really good + the shipping time to Germany ( Where I sell ) is very good!</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(4)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-4.png" alt="">
                    </figure>
                    <h3>Zoe</h3>
                    <h4>Shopify seller</h4>
                    <p>Wow! The quality is just outstanding! The thickness and fit of the shirt are perfect and the
                        print is also amazing. Very good work and service! I'm definitely going to buy more stuff from
                        you in the future.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(5)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-5.png" alt="">
                    </figure>
                    <h3>Lorna</h3>
                    <h4>Shopify seller</h4>
                    <p>PODpartner greatly meets our needs. Their mockup generator is really impressive and makes the
                        design process much more fun. The quality of their products is another big plus. We love what
                        they delivered and so do our customers.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(6)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-6.png" alt="">
                    </figure>
                    <h3>Brandon</h3>
                    <h4>Wix user</h4>
                    <p>If you're looking for fast fulfillment without compromising on the quality, PODpartner is the
                        option. It takes only a few days for our customers to receive the products and everyone's been
                        super happy with what they got.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(7)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20230202/about-comment-7.png" alt="">
                    </figure>
                    <h3>Daniel</h3>
                    <h4>Etsy seller</h4>
                    <p>They offer a lot of bang for your buck. Since we started using PODpartner, we're selling much
                        better than before. Many of our customers are coming back and our business has grown
                        significantly.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>
                <div class="about-comment-content-tab" :class="getCommentClass(8)">
                    <figure>
                        <img src="https://img.podpartner.com/static/images-20240305/about-comment-8.png" alt="">
                    </figure>
                    <h3>Sabrina</h3>
                    <h4>Shopify seller</h4>
                    <p>What impressed me the most was the PODpartner's customer service team. They were very responsive
                        and helpful, saving me plenty of time and effort. Also, I truly appreciate the fact that they
                        cared about my experience and were constantly checking in.</p>
                    <div class="about-comment-content-footer">
                        <figure>
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                            <img src="https://img.podpartner.com/static/images-20230202/swiper-star.png" alt="">
                        </figure>
                    </div>
                </div>

            </div>
            <div class="about-comment-arrow">
                <svg-icon sort='left' name="tree-down" @click.native="changeCommentActive(-1)"></svg-icon>
                <p :class="{ active: comment_active == 1 }"></p>
                <p :class="{ active: comment_active == 2 }"></p>
                <p :class="{ active: comment_active == 3 }"></p>
                <p :class="{ active: comment_active == 4 }"></p>
                <p :class="{ active: comment_active == 5 }"></p>
                <p :class="{ active: comment_active == 6 }"></p>
                <p :class="{ active: comment_active == 7 }"></p>
                <p :class="{ active: comment_active == 8 }"></p>
                <svg-icon sort='right' name="tree-down" @click.native="changeCommentActive(1)"></svg-icon>
            </div>
        </section>
        <div class="about-comment-started">
            <ul>
                <li><strong>•</strong>No Order Minimums</li>
                <li><strong>•</strong>No Sale, No Charge</li>
                <li><strong>•</strong>No Unsold Stock</li>
                <li><strong>•</strong>No Quality Concerns</li>
            </ul>
            <h3>Only Creativity, Satisfaction, and Profits!</h3>
            <button @click="openWindow('/product')">Get Started</button>
        </div>
    </div>
</template>
<script>
import { ABOUT } from "@/utils/SeoConfig"
export default {
    name: "AboutUs",
    head ({ $store }) {
        return {
            title: ABOUT.title,
            meta: [
                { name: "keywords", content: ABOUT.keywords },
                { name: "description", content: ABOUT.description },
            ],
        };
    },
    data () {
        return {
            headerScroll: 0,
            screenHeight: 0,
            domList: null,
            scrollTime: null,
            scrollOld: 0,
            scrollDivY: 0,
            heightArr: [1.35, 0, 3, 1.75],
            scrollArr: [0, 0, 0],
            minScreen: false,
            num_list: [],
            num_final_list: [11, 7, 16000, 172, 2632, 300000],
            num_trans: false,
            comment_active: 1,
            old_comment_active: null,
            comment_timer: null,
            interval: 8000,
        };
    },
    watch: {
        num_trans (val, oldVal) {
            if (val && val !== oldVal) {
                this.NumStart(100, 1, 1000)
            } else if (!val && val !== oldVal) {
                this.num_list = [0, 0, 0, 0, 0]
            }
        },
        comment_active (val, oldVal) {
            if (val !== oldVal) {
                this.old_comment_active = oldVal;
            }
        }
    },
    computed: {

    },
    methods: {
        openWindow (url) {
            window.open(url, "_blank");
        },
        getCommentClass (num) {
            if (this.comment_active == num) {
                return 'comment-tab-show'
            } else if (this.old_comment_active == num) {
                return 'comment-tab-hidden'
            }
        },
        onStart () {
            clearInterval(this.comment_timer)
            this.comment_timer = setInterval(this.onMove, this.interval)
        },
        onStop () {
            clearInterval(this.comment_timer)
        },
        // onEnter (index) {
        //     clearInterval(this.comment_timer)
        //     this.comment_active = index
        //     this.onStart()
        // },
        onMove () {
            if (this.comment_active === 8) {
                this.comment_active = 1
            } else {
                this.comment_active++
            }
        },
        changeCommentActive (dif) {
            if (dif > 0) {
                if (this.comment_active < 8) {
                    this.comment_active += 1
                } else {
                    this.comment_active = 1
                }
            } else {
                if (this.comment_active == 1) {
                    this.comment_active = 8
                } else {
                    this.comment_active -= 1
                }
            }
            clearInterval(this.comment_timer)
            this.onStart()
        },
        //第一屏数字滚动
        NumRoll (total, step) {
            let n = step;
            let that = this;
            return function () {
                n = (n + step) >= total ? total : (n + step);
                let rate = n / 100;
                if (n <= total) {
                    that.num_final_list.map((item, index) => {
                        that.$set(that.num_list, index, parseInt(item * rate))
                    })
                }
            }
        },
        NumStart (index, step, runtime = 1000) {
            let rolling = this.NumRoll(index, step)
            runtime = (runtime >= 300) ? runtime : 1000;
            let timer = null
            for (let i = 0; i < (index / step); i++) {
                timer = setTimeout(rolling, (runtime / index) * i * step)
            }
            clearTimeout(timer);
        },
        //第一屏获取数字
        getStrByNum (num) {
            let str = (num || 0).toString();
            let length = str.length;
            let before = str.substring(0, length - 3);
            let after = str.substring(length - 3, length);
            if (!before) {
                return after
            }
            return `${before},${after}`
        },
        section4 (scroll, height) {
            const { section4 } = this.domList;
            let bgScroll = scroll - height * (this.scrollArr[2] - 0.1)
            scroll = scroll - height * this.scrollArr[2];
            scroll = scroll > 0 ? scroll : 0;
            const scrollHeight = height * this.heightArr[3]
            let scrollRate = this.getRate(scroll, [0, scrollHeight]);
            let rate1 = this.getRate(scroll, [0, height / 2]);
            let rate2 = this.getRate(scroll, [0, height * 0.7]);
            let rate3 = this.getRate(scroll, [height * 0.59, height * 1]);
            let rate4 = this.getRate(scroll, [height * 1, height * 1.25]);
            let rate5 = this.getRate(scroll, [height * 1.25, height * 1.75]);
            let rate6 = this.getRate(bgScroll, [0, height * 0.7]);
            let circularOpacity = rate5 == 1 ? 0 : 0.9 * rate6;
            // let circularOpacity = rate5 == 1 ? 0 : 0.9 * rate1;
            let transY = height * 2;

            let transformY = transY - ((height * 2 - 230) * rate6 + 230 * rate5);
            let transformS = 10 * (1 - 0.9 * rate6);
            let pCiteOpacity = rate3 != 0 && rate4 != 1 ? 1 : 0;
            let pColor = rate5 == 1 ? '#EA4C89' : '#f28346';
            let pOpacity = rate5 == 1 ? 1 : circularOpacity;

            section4.section.style.transform = `translate3d( 0 , ${scrollHeight * scrollRate}px ,0 )`;
            section4.bg.style.setProperty('--circularOpacity', circularOpacity); //背景
            section4.bg.style.setProperty('--transformY', `${transformY}px`);
            section4.bg.style.setProperty('--transformS', `${transformS}`);
            section4.bg.style.setProperty('--pCiteOpacity', `${pCiteOpacity}`); //文字
            section4.p.style.backgroundColor = pColor;
            section4.p.style.opacity = pOpacity;

        },
        section3 (scroll, height) {
            // 缓存 DOM 元素
            const { section3 } = this.domList;
            const { section, dl, dt } = section3;

            // 滚动量的处理
            const baseScroll = scroll;
            scroll = Math.max(scroll - height * this.scrollArr[1], 0);

            // 高度的处理
            const section_height = section.clientHeight;
            const dl_height = dl.clientHeight;
            const dt_height = dt[0].clientHeight;

            const region = dl_height - parseInt(section_height / 2); // 历史滚动距离 3000
            const scrollHeight = height * this.heightArr[2];

            // 计算需要的比率
            const scrollRate = this.getRate(scroll, [0, scrollHeight]);
            const rate1 = this.getRate(scroll, [scrollHeight - (0.3 * height), scrollHeight]);
            const rate2 = this.getRate(baseScroll, [(this.scrollArr[2] - 0.5) * height, (this.scrollArr[2] - 0.4) * height]);

            const color = 255 - 9 * rate1 - 246 * rate2;
            const bgColor = 246 * (1 - rate2);
            const opacity = 1 - rate2;

            dt.forEach((dom, index) => {
                let startTop = dom.offsetTop > region ? region : dom.offsetTop;
                const nextDom = dt?.[index + 1] ?? null;
                let endTop = nextDom ? nextDom.offsetTop - dt_height : region;
                if (endTop > region) endTop = region;
                let startRate = (startTop / region).toFixed(5); //0
                let endRate = (endTop / region).toFixed(5); //160

                let rate = this.getRate(scroll, [scrollHeight * startRate, scrollHeight * endRate])

                let transY = region * (endRate - startRate) * rate;

                dom.style.transform = `translate3d( 0 , ${transY}px ,0 )`;
            })

            section.style.transform = `translate3d( 0 , ${scrollHeight * scrollRate}px ,0 )`;
            section.style.setProperty('--maskColor', `rgb(${color}, ${color}, ${color})`);
            section.style.setProperty('--bgColor', `rgb(${bgColor}, ${bgColor}, ${bgColor})`);
            section.style.opacity = opacity;

            dl.style.transform = `translate3d( 0 , -${region * scrollRate}px ,0 )`;
        },

        section2 (scroll, height) {
            let rate1Scroll = scroll - height * (this.scrollArr[0] - 0.5);
            scroll = scroll - height * this.scrollArr[0]
            scroll = scroll > 0 ? scroll : 0;
            const scrollHeight = height * this.heightArr[1];
            let scrollRate = this.getRate(scroll, [0, scrollHeight])
            let rate1 = this.getRate(rate1Scroll, [0.2 * height, height * 0.5])
            //start
            const { section2 } = this.domList;
            section2.section.style.transform = `translate3d( 0 , ${scrollHeight * scrollRate}px ,0 )`;
            section2.section.style.setProperty('--ddOpacity', rate1)

            // let className = section2.ddArr[1].className;
            // if (scroll > 0) {
            //     if (className.indexOf('show-item') != -1) return;
            //     for (let index = 0; index < 5; index++) {
            //         if (section2.ddArr[index].className.indexOf('show-item') != -1) {
            //             return
            //         }
            //         section2.ddArr[index].className = 'show-item';
            //     }
            // } else {
            //     for (let index = 0; index < 5; index++) {
            //         if (section2.ddArr[4 - index].className.indexOf('hide-item') != -1) {
            //             return
            //         }
            //         section2.ddArr[4 - index].className = 'hide-item'
            //     }
            // }
        },
        section1 (scroll, height) {
            const { section1 } = this.domList;
            const scrollHeight = height * this.heightArr[0];
            let step = [0, height * 0.5, height * 1, height * 1.35, scrollHeight];
            // let sectionY = (height / 2) - 160; //值越大 距离上边距离越小
            let rate1 = this.getRate(scroll, [step[0], step[1]]);
            let rate2 = this.getRate(scroll, [step[1], step[2]]);
            let rate3 = this.getRate(scroll, [(step[2] - 0.3 * height), step[3]]);
            let scrollRate = this.getRate(scroll, [step[0], step[4]]);
            section1.section.style.transform = `translate3d( 0 , ${scrollHeight * scrollRate}px ,0 )`;
            section1.bg.style.opacity = 1 - rate1;
            section1.h2.style.fontSize = `${132 - 44 * rate2}px`
            section1.title.style.transform = `translate3d( 0 , -${(height * 0.35) * rate2}px ,0 )`;
            section1.content.style.transform = `translate3d( 0 , -${(height * 0.70) * rate3}px ,0 )`;
        },
        bgTransform (scroll, height) {
            // let rate = scroll / height;
            // let list = this.heightArr;
            const { about } = this.domList;
            let scrollArr = this.scrollArr;
            let step = [(scrollArr[0] - 0.5) * height, (scrollArr[0] - 0.4) * height, (scrollArr[2] - 0.5) * height, (scrollArr[2] - 0.4) * height];
            let rate1 = this.getRate(scroll, [step[0], step[1]]);
            let rate2 = this.getRate(scroll, [step[2], step[3]]);
            let rate3 = this.getRate(scroll, [(scrollArr[1]) * height, (scrollArr[1] + 0.1) * height])
            let numRate = this.getRate(scroll, [0, (scrollArr[0] - 1.38) * height])
            let color = rate1 * 255 - rate3 * 9 - rate2 * 246
            about.style.backgroundColor = `rgb(${color},${color},${color})`;
            if (numRate == 1 && !this.num_trans) {
                this.num_trans = true
            } else if (numRate != 1 && this.num_trans) {
                this.num_trans = false
            }
            // scroll / height
        },
        getRate (scroll, arr) {
            scroll ? scroll : 0;
            arr ? arr : [0, 0]
            let rate = scroll > arr[0] ? scroll <= arr[1] ? (scroll - arr[0]) / (arr[1] - arr[0]) : 1 : 0;
            return rate
        },
        onScroll () {
            if (this.minScreen) return;
            let scrollTop =
                document.documentElement.scrollTop || document.body.scrollTop;
            let height = this.screenHeight
            this.scrollDivY = scrollTop;
            this.bgTransform(scrollTop, height)
            this.section1(scrollTop, height)
            this.section2(scrollTop, height)
            this.section3(scrollTop, height)
            this.section4(scrollTop, height)
            // }
            // this.scrollOld = scrollTop
        },
        getDomList () {
            let about = document.querySelector('.about');
            let aboutScroll = document.querySelector('.about-scroll');
            let empty = document.querySelector('.empty');
            let section1 = (() => {
                let section = document.querySelector('.about-header')
                let content = section.querySelector('.about-header-title-content')
                let title = section.querySelector('.about-header-title')
                let h2 = title.querySelector('h2')
                let bg = title.querySelector('.about-bg-circular')
                return { section, content, title, h2, bg }
            })()
            let section2 = (() => {
                let section = document.querySelector('.about-different')
                let dl = section.querySelector('dl')
                let ddArr = section.querySelectorAll('dd')
                return { section, ddArr, dl }
            })()
            let section3 = (() => {
                let section = document.querySelector('.about-history')
                let article = section.querySelector('article')
                let dl = section.querySelector('dl')
                let dt = dl.querySelectorAll('dt')
                return { section, article, dl, dt }
            })()
            let section4 = (() => {
                let section = document.querySelector('.about-culture')
                let h2 = section.querySelector('h2')
                let bg = section.querySelector('.about-bg-circular')
                let p = bg.querySelector('.p-last-color')
                return { section, h2, bg, p }
            })()
            this.domList = {
                about,
                empty,
                aboutScroll,
                section1,
                section2,
                section3,
                section4
            }
            this.formatDomTop()
        },
        formatDomTop () {
            if (this.minScreen) return;
            let { aboutScroll, empty, section2, section3, section4 } = this.domList;
            //重新设置高度
            let height = this.screenHeight;
            let list = this.heightArr;
            let top2 = list[0] + 1.2;
            let top3 = top2 + list[1] + 1.3;
            let top4 = top3 + list[2] + 0.8;
            let emptyHeight = top4 + list[3] + 1;
            aboutScroll.style.setProperty('--sectionHeight', `${height}px`) // 动态设置一屏高度
            section2.section.style.top = `${top2 * height}px`;
            section3.section.style.top = `${top3 * height}px`;
            section4.section.style.top = `${top4 * height}px`;
            empty.style.height = `${emptyHeight * height - 78}px`;
            this.scrollArr[0] = top2;
            this.scrollArr[1] = top3;
            this.scrollArr[2] = top4;
        },
        changeScreenSize () {
            let height = document.documentElement.clientHeight;
            let width = document.documentElement.clientWidth;
            this.screenHeight = height;
            if (height >= 760 && width >= 1180) {
                this.minScreen = false;
                this.onScroll()
                this.formatDomTop()
                this.num_list = [0, 0, 0, 0, 0, 0]
            } else {
                this.minScreen = true;
                this.num_list = JSON.parse(JSON.stringify(this.num_final_list))
            }
        }
    },

    mounted () {
        // this.$nextTick(() => {
        this.getDomList()
        this.changeScreenSize()
        setTimeout(() => this.onStart(), 1000)

        window.addEventListener("scroll", this.onScroll);
        window.addEventListener("resize", this.changeScreenSize);
        window.addEventListener("focus", this.onStart);
        window.addEventListener("blur", this.onStop);
        // })
        // window.onfocus = () => { // 页面激活
        //     this.onStart()
        // }
        // window.onblur = () => { // 页面失焦
        //     this.onStop()
        // }
    },
    beforeDestroy () {
        window.removeEventListener("scroll", this.onScroll);
        window.removeEventListener("resize", this.changeScreenSize);
        window.removeEventListener("focus", this.onStart);
        window.removeEventListener("blur", this.onStop);
        clearInterval(this.comment_timer)
        this.comment_timer = null
    },
};
</script>

<style lang="scss" scoped>
.about-comment-started {
    width: 100%;
    background-color: #ffffff;
    position: relative;
    padding: 144px 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    ul {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: center;
        margin-bottom: 16px;

        li {
            font-family: Roboto-Medium, Roboto;
            font-weight: 500;
            font-size: 20px;
            line-height: 26px;
            color: #000000;
            margin: 0 16px 16px;

            strong {
                padding-right: 8px;
                color: #EDB002;
            }
        }
    }

    h3 {
        text-align: center;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 32px;
        color: #000000;
        line-height: 40px;
        margin-bottom: 40px;
    }

    button {
        width: 248px;
        height: 52px;
        background: linear-gradient(315deg, #FF813F 0%, #EA4C89 100%);
        border-radius: 10px;
        font-family: Roboto-Medium, Roboto;
        font-weight: 500;
        font-size: 20px;
        color: #FFFFFF;
        line-height: 24px;
        border: none;

        &:hover {
            color: rgba($color: #FFFFFF, $alpha: .5);
        }
    }
}

// min-width 1200px
@keyframes show-item {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hide-item {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes img-scala-show {
    0% {
        width: 0;
        height: 0;
    }

    100% {
        width: 88px;
        height: 88px;
    }
}

@keyframes img-scala-show-web {
    0% {
        width: 0;
        height: 0;
    }

    100% {
        width: 40px;
        height: 40px;
    }
}

@keyframes text-trans-show {
    0% {
        opacity: 0;
        transform: translateY(180px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes text-trans-show-web {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes text-trans-hidden {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-80px);
    }
}

@keyframes text-trans-hidden-web {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-40px);
    }
}

.show-item {
    animation: show-item 0.5s forwards;
}

.hide-item {
    animation: hide-item 0.5s forwards;
}

.about {
    font-family: 'Roboto';
    --screenHeight: calc(100vh - 78px);
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;
    // transition: background-color 0.1s;

    .empty {
        width: 1px;
        height: calc(var(--screenHeight) * 20);
        // min-height: 14000px;
    }

    .about-fixed {
        position: fixed;
        inset: 0 0 0 0;
        overflow: hidden;
    }

    .about-scroll {
        --sectionHeight: 100vh;

        &>section {
            width: 100%;
            height: var(--sectionHeight, 50vh);
            box-sizing: border-box;
            padding-top: 78px;
        }

        .about-header {
            width: 100vw;
            padding-top: 78px;
            color: #fff;

            .about-header-title {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                height: var(--screenHeight);

                >h2 {
                    z-index: 1;
                    text-align: center;
                    font-size: 132px;
                    font-weight: bold;
                    color: #fff;
                    height: 140px;
                    line-height: 140px;

                    strong {
                        color: #fbbc06;
                    }
                }
            }

            .about-header-title-content {
                margin: 0 auto;
                width: 1100px;

                h3 {
                    display: none;
                }

                p {
                    font-size: 18px;
                    color: #d9d9d9;
                    line-height: 32px;
                }

                &>cite {
                    margin-top: 32px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    p {
                        flex: 1;
                    }

                    figure {
                        width: 300px;
                        height: 180px;
                        margin-right: 40px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                &>ul {
                    margin-top: 60px;
                    box-sizing: border-box;
                    width: 100%;
                    border-radius: 12px;
                    border: 1px solid #2e2e2e;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    padding: 40px 0 0;

                    li {
                        width: 33.3%;
                        margin-bottom: 20px;
                        padding-left: 100px;
                        box-sizing: border-box;

                        h4 {
                            font-size: 42px;
                            font-weight: 400;
                            color: #fbbc06;
                            line-height: 42px;
                            margin-bottom: 2px;
                        }

                        p {
                            font-size: 16px;
                            font-weight: 400;
                            color: #bfbfbf;
                            line-height: 22px;
                            height: 44px;
                        }
                    }
                }
            }
        }

        .about-different {
            position: absolute;
            width: 100vw;
            top: 560vh;
            left: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            --ddOpacity: 0;

            &>dl {
                width: 1136px;
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                width: 1136px;
                margin: 0 -11px;
                overflow: hidden;

                dt {
                    width: 100%;
                    height: 80px;
                    font-size: 72px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 80px;
                    text-align: center;
                }

                dd {
                    box-sizing: border-box;
                    width: 364px;
                    height: 280px;
                    background: #f6f6f6;
                    border-radius: 10px;
                    padding: 36px 22px 0;
                    margin: 40px 0px 0;
                    // transition: opacity 0.3s;
                    opacity: var(--ddOpacity);

                    figure {
                        margin-left: 20px;
                        width: 72px;
                        height: 72px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    h4 {
                        margin: 14px 0 10px 12px;
                        height: 24px;
                        font-size: 18px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 24px;
                        white-space: nowrap;
                    }

                    p {
                        font-size: 16px;
                        color: #000000;
                        line-height: 28px;
                        white-space: nowrap;
                    }

                    &:nth-child(2) {
                        margin: 40px 11px 0 100px;
                    }

                    &:nth-child(3) {
                        margin: 40px 100px 0 11px;
                    }

                    &:nth-child(5) {
                        margin-left: 22px;
                        margin-right: 22px;
                    }
                }
            }
        }

        .about-history {
            --maskColor: rgba(255, 255, 255);
            --bgColor: rgb(246, 246, 246);
            position: absolute;
            top: 1050vh;
            width: 100vw;
            left: 0;
            padding: 0;
            overflow: hidden;
            background-color: var(--bgColor);
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            justify-content: center;

            &>article,
            &>.about-history-list {
                width: 50%;
            }

            &>article {
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                padding: 148px 120px 0 0;

                &>h2 {
                    width: 368px;
                    height: 90px;
                    font-size: 72px;
                    font-weight: 600;
                    color: #ffffff;
                    line-height: 90px;
                    background-color: #000;
                    margin-bottom: 44px;
                    text-align: center;
                }

                &>h3 {
                    box-sizing: border-box;
                    margin-top: 32px;
                    padding-left: 16px;
                    width: 368px;
                    height: 26px;
                    font-size: 24px;
                    font-weight: 600;
                    color: #000000;
                    line-height: 26px;

                    &:nth-child(2),
                    &:nth-child(4),
                    &:nth-child(6) {
                        position: relative;

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            border-radius: 8px;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            background-color: #ea4c89;
                            transform: translateY(-50%);
                        }
                    }

                    &:nth-child(4)::before {
                        background-color: #edb002;
                    }

                    &:nth-child(6)::before {
                        background-color: #43b9e2;
                    }
                }

                &>p {
                    margin-top: 16px;
                    width: 368px;
                    font-size: 14px;
                    color: #000000;
                    line-height: 22px;
                }
            }

            .about-history-list {
                position: relative;
                overflow: hidden;
                background: var(--maskColor);
                padding: 0 0 220px 112px;

                .about-history-list-mask {
                    position: absolute;
                    top: 2px;
                    right: 0px;
                    width: 100%;
                    height: 140px;
                    background: var(--maskColor);
                    z-index: 2;
                }

                &>dl {
                    margin-top: 140px;
                    position: relative;

                    &::before {
                        content: '';
                        height: 100%;
                        width: 1px;
                        background: #dcdcdc;
                        position: absolute;
                        left: 4px;
                        top: 18px;
                    }

                    &::after {
                        content: '';
                        display: block;
                        position: absolute;
                        left: -1px;
                        bottom: -18px;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-top: 10px solid #dcdcdc;
                    }

                    dt {
                        z-index: 1;
                        position: relative;
                        padding-left: 22px;
                        font-size: 36px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 40px;
                        margin-top: 92px;
                        background: var(--maskColor);

                        strong {
                            color: #fbbc06;
                        }

                        br {
                            display: inline;
                            line-height: 10px;
                        }

                        &>em {
                            font-size: 18px;
                            color: #000000;
                            line-height: 12px;
                            font-weight: 400;
                        }

                        &:nth-child(1) {
                            margin-top: 0;
                            margin-bottom: 120px;

                            &::after {
                                content: attr(content);
                                display: inline-block;
                                position: absolute;
                                top: 100%;
                                left: 22px;
                                height: 18px;
                                line-height: 18px;
                                font-size: 18px;
                                color: #000000;
                                font-weight: 400;
                                transform: translateY(8px);
                            }
                        }

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            background: #000000;
                            border-radius: 8px;
                            position: absolute;
                            left: 5px;
                            top: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                    dd {
                        padding-left: 22px;
                        margin-top: 40px;
                        position: relative;

                        strong {
                            font-size: 36px;
                            font-weight: 600;
                            color: #000000;
                        }

                        p {
                            width: 420px;
                        }

                        font-size: 18px;
                        color: #000000;

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            background: #000000;
                            border-radius: 8px;
                            position: absolute;
                            left: 5px;
                            top: 26px;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
        }

        .about-culture {
            z-index: -1;
            position: absolute;
            width: 100vw;
            top: 1400vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            >h2 {
                text-align: center;
                font-size: 52px;
                font-weight: 600;
                color: #ffffff;
                line-height: 62px;
                z-index: 2;
                transform: translateY(-14px);
            }

            .about-bg-circular {
                z-index: -1;
                animation: none;
                --circularOpacity: 0.9;
                --transformY: 2600px;
                --transformS: 10;
                --circularOpacity: 0;
                --pCiteOpacity: 0;
                top: calc(50% + 39px);

                >.circular {
                    width: 250px;
                    height: 250px;
                    transition: background-color 0.3s;

                    cite {
                        transition: opacity 0.3s;
                        opacity: var(--pCiteOpacity);
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        font-size: 24px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 28px;

                        >figure {
                            width: 60px;
                            height: 60px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    &:nth-child(1)>cite {
                        transform: rotate(-180deg);
                    }

                    &:nth-child(2)>cite {
                        transform: rotate(-240deg);
                    }

                    &:nth-child(3)>cite {
                        transform: rotate(-300deg);
                    }

                    &:nth-child(4)>cite {
                        transform: rotate(0deg);
                    }

                    &:nth-child(5)>cite {
                        transform: rotate(-60deg);
                    }

                    &:nth-child(6)>cite {
                        transform: rotate(-120deg);
                    }
                }
            }
        }
    }
}

.about-environment {
    width: 100%;
    min-height: var(--screenHeight);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #000;

    cite {
        width: 100%;
        max-width: 1090px;
        font-size: 26px;
        color: #d9d9d9;
        line-height: 48px;
        position: relative;

        figure {
            width: 88px;
            height: 78px;
            margin: 10px 10px 0 0;
            float: left;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    .about-photo-wall {
        width: 100%;
        height: 1100px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url('https://img.podpartner.com/static/images-20230202/photo-wall-bg.png');
        background-repeat: no-repeat;
        background-size: 1202px 1100px;
        background-position: center;
        margin: 80px 0 200px;

        &>svg,
        &>img {
            display: none;
        }

        &>ul {
            margin-top: 212px;
            width: 540px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

            li {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 140px;
                margin-bottom: 18px;

                figure {
                    width: 140px;
                    height: 146px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                h4 {
                    text-align: center;
                    width: 140px;
                    height: 18px;
                    font-size: 16px;
                    font-weight: bold;
                    color: #d9d9d9;
                    line-height: 18px;
                    margin: 8px 0 4px;
                }

                p {
                    text-align: center;
                    width: 140px;
                    height: 16px;
                    font-size: 14px;
                    font-weight: 400;
                    color: #999999;
                    line-height: 16px;
                    white-space: nowrap;
                }
            }
        }
    }
}

.about-bg-circular {
    @keyframes circular-rotate {
        0% {
            transform: translate(-50%, -50%) rotate(0deg);
        }

        100% {
            transform: translate(-50%, -50%) rotate(360deg);
        }
    }

    --transformY: 160px;
    --circularOpacity: 0.24;
    --transformS: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: circular-rotate 60s linear infinite;

    >.circular {
        position: absolute;
        font-size: 0;
        width: 175px;
        height: 175px;
        border-radius: 175px;
        opacity: var(--circularOpacity);

        &:nth-child(1) {
            transform: rotate(180deg) translateY(var(--transformY)) scale(var(--transformS));
            background-color: #ea4c89;
        }

        &:nth-child(2) {
            background-color: #6a69b0;
            transform: rotate(240deg) translateY(var(--transformY)) scale(var(--transformS));
        }

        &:nth-child(3) {
            background-color: #43b9e2;
            transform: rotate(300deg) translateY(var(--transformY)) scale(var(--transformS));
        }

        &:nth-child(4) {
            background-color: #9fba73;
            transform: rotate(0deg) translateY(var(--transformY)) scale(var(--transformS));
        }

        &:nth-child(5) {
            background-color: #fbbc06;
            transform: rotate(60deg) translateY(var(--transformY)) scale(var(--transformS));
        }

        &:nth-child(6) {
            background-color: #f28346;
            transform: rotate(120deg) translateY(var(--transformY)) scale(var(--transformS));
        }
    }
}

.about-static {
    font-family: 'Roboto';
    box-sizing: border-box;
    width: 100%;
    background: transparent !important;

    .empty {
        display: none;
    }

    .about-fixed {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .about-scroll {
        transform: none !important;

        &>section {
            padding: 60px 0;
            transform: none !important;
        }

        .about-header {
            box-sizing: border-box;
            width: 100%;
            min-height: 568px;
            background: #000;
            padding: 0 14px 40px;

            .about-header-title {
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: none !important;
                // margin-bottom: 48px;
                height: calc(100vh - 78px);

                >h2 {
                    z-index: 1;
                    text-align: center;
                    font-size: 132px;
                    font-weight: bold;
                    color: #fff;
                    height: 140px;
                    line-height: 140px;

                    strong {
                        color: #fbbc06;
                    }
                }

                .about-bg-circular {
                    opacity: 1 !important;
                }
            }

            .about-header-title-content {
                margin: 0 auto;
                width: 100%;
                transform: none !important;

                h3 {
                    text-align: center;
                    color: #fff;
                    font-size: 72px;
                    font-weight: bold;
                    line-height: 72px;
                    margin-bottom: 16px;

                    strong {
                        color: #fbbc06;
                    }
                }

                p {
                    font-size: 18px;
                    color: #d9d9d9;
                    line-height: 32px;
                }

                &>cite {
                    margin-top: 32px;
                    display: flex;
                    flex-direction: row;
                    align-items: center;

                    p {
                        flex: 1;
                    }

                    figure {
                        width: 300px;
                        height: 180px;
                        margin-right: 40px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                &>ul {
                    margin-top: 60px;
                    box-sizing: border-box;
                    width: 100%;
                    border-radius: 12px;
                    border: 1px solid rgba(#979797, 0.2);
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    padding: 40px 0 0;

                    li {
                        width: 33.3%;
                        margin-bottom: 20px;
                        padding-left: 100px;
                        box-sizing: border-box;

                        h4 {
                            font-size: 42px;
                            font-weight: 400;
                            color: #fbbc06;
                            line-height: 42px;
                            margin-bottom: 2px;
                        }

                        p {
                            font-size: 16px;
                            font-weight: 400;
                            color: #bfbfbf;
                            line-height: 22px;
                            height: 44px;
                        }
                    }
                }
            }
        }

        .about-different {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #fff;
            padding: 60px 0;
            overflow: hidden;

            &>dl {
                display: flex;
                flex-direction: row;
                align-items: center;
                flex-wrap: wrap;
                justify-content: center;
                margin: 0 -11px;

                dt {
                    width: 100%;
                    font-size: 72px;
                    font-weight: bold;
                    color: #000000;
                    line-height: 80px;
                    text-align: center;
                }

                dd {
                    box-sizing: border-box;
                    width: 364px;
                    height: 280px;
                    background: #f6f6f6;
                    border-radius: 10px;
                    padding: 36px 42px 0;
                    margin: 40px 11px 0;
                    opacity: 1 !important;

                    // transition: opacity 0.3s;
                    figure {
                        width: 72px;
                        height: 72px;

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    h4 {
                        margin: 8px 0;
                        font-size: 18px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 24px;
                    }

                    p {
                        font-size: 16px;
                        color: #000000;
                        line-height: 24px;
                    }
                }
            }
        }

        .about-history {
            background-color: #f6f6f6;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: center;
            padding: 0;

            &>article,
            &>.about-history-list {
                width: 100%;
            }

            &>article {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 60px 0;

                &>h2 {
                    width: 368px;
                    height: 90px;
                    font-size: 72px;
                    font-weight: 600;
                    color: #ffffff;
                    line-height: 90px;
                    background-color: #000;
                    margin-bottom: 44px;
                    text-align: center;
                }

                &>h3 {
                    box-sizing: border-box;
                    margin-top: 32px;
                    padding-left: 16px;
                    height: auto;
                    width: 368px;
                    font-size: 24px;
                    font-weight: 600;
                    color: #000000;
                    line-height: 26px;

                    &:nth-child(2),
                    &:nth-child(4),
                    &:nth-child(6) {
                        position: relative;

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            border-radius: 8px;
                            position: absolute;
                            left: 0;
                            top: 50%;
                            background-color: #ea4c89;
                            transform: translateY(-50%);
                        }
                    }

                    &:nth-child(4)::before {
                        background-color: #edb002;
                    }

                    &:nth-child(6)::before {
                        background-color: #43b9e2;
                    }
                }

                &>p {
                    margin-top: 16px;
                    width: 368px;
                    font-size: 14px;
                    color: #000000;
                    line-height: 22px;
                }
            }

            .about-history-list {
                padding: 60px 0 120px;
                background: #fff;
                display: flex;
                flex-direction: column;
                align-items: center;

                .about-history-list-mask {
                    display: none;
                }

                &>dl {
                    transform: none !important;
                    position: relative;

                    &::before {
                        content: '';
                        height: 100%;
                        width: 1px;
                        background: #dcdcdc;
                        position: absolute;
                        left: 4px;
                        top: 18px;
                    }

                    &::after {
                        content: '';
                        display: block;
                        position: absolute;
                        left: -1px;
                        bottom: -18px;
                        border-left: 5px solid transparent;
                        border-right: 5px solid transparent;
                        border-top: 10px solid #dcdcdc;
                    }

                    dt {
                        transform: none !important;
                        position: relative;
                        padding-left: 22px;
                        font-size: 36px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 40px;
                        margin-top: 92px;
                        background: #fff;

                        strong {
                            color: #fbbc06;
                        }

                        br {
                            display: inline;
                            line-height: 10px;
                        }

                        &>em {
                            font-size: 18px;
                            color: #000000;
                            line-height: 12px;
                            font-weight: 400;
                        }

                        &:nth-child(1) {
                            margin-top: 0;
                            margin-bottom: 120px;

                            &::after {
                                content: attr(content);
                                display: inline-block;
                                position: absolute;
                                top: 100%;
                                left: 22px;
                                height: 18px;
                                line-height: 18px;
                                font-size: 18px;
                                color: #000000;
                                font-weight: 400;
                                transform: translateY(8px);
                            }
                        }

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            background: #000000;
                            border-radius: 8px;
                            position: absolute;
                            left: 5px;
                            top: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }

                    dd {
                        padding-left: 22px;
                        margin-top: 40px;
                        position: relative;

                        strong {
                            font-size: 36px;
                            font-weight: 600;
                            color: #000000;
                        }

                        p {
                            width: 100%;
                            max-width: 420px;
                        }

                        font-size: 18px;
                        color: #000000;

                        &::before {
                            content: '';
                            display: block;
                            width: 8px;
                            height: 8px;
                            background: #000000;
                            border-radius: 8px;
                            position: absolute;
                            left: 5px;
                            top: 26px;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
        }

        .about-culture {
            transform: none !important;
            top: auto !important;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: #000;
            height: 750px;

            >h2 {
                text-align: center;
                font-size: 52px;
                font-weight: 600;
                color: #ffffff;
                line-height: 62px;
                z-index: 2;
                transform: translateY(-14px);
            }

            .about-bg-circular {
                // z-index: -1;
                --static-transformY: 260px;
                transform: none !important;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                align-items: center;
                justify-content: center;
                animation: none;

                >.circular {
                    position: absolute;
                    font-size: 0;
                    width: 250px;
                    height: 250px;
                    border-radius: 250px;
                    opacity: 0.9 !important;

                    cite {
                        transition: opacity 0.3s;
                        opacity: 1;
                        width: 100%;
                        height: 100%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        font-size: 24px;
                        font-weight: 600;
                        color: #000000;
                        line-height: 28px;

                        >figure {
                            width: 60px;
                            height: 60px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }

                    &:nth-child(1)>cite {
                        transform: rotate(-180deg);
                    }

                    &:nth-child(2)>cite {
                        transform: rotate(-240deg);
                    }

                    &:nth-child(3)>cite {
                        transform: rotate(-300deg);
                    }

                    &:nth-child(4)>cite {
                        transform: rotate(0deg);
                    }

                    &:nth-child(5)>cite {
                        transform: rotate(-60deg);
                    }

                    &:nth-child(6)>cite {
                        transform: rotate(-120deg);
                    }

                    &:nth-child(1) {
                        transform: rotate(180deg) translateY(var(--static-transformY));
                        background-color: #ea4c89;
                    }

                    &:nth-child(2) {
                        background-color: #6a69b0;
                        transform: rotate(240deg) translateY(var(--static-transformY));
                    }

                    &:nth-child(3) {
                        background-color: #43b9e2;
                        transform: rotate(300deg) translateY(var(--static-transformY));
                    }

                    &:nth-child(4) {
                        background-color: #9fba73;
                        transform: rotate(0deg) translateY(var(--static-transformY));
                    }

                    &:nth-child(5) {
                        background-color: #fbbc06;
                        transform: rotate(60deg) translateY(var(--static-transformY));
                    }

                    &:nth-child(6) {
                        background-color: #f28346;
                        transform: rotate(120deg) translateY(var(--static-transformY));
                    }
                }
            }
        }
    }

    .about-environment {
        box-sizing: border-box;
        padding: 140px 20px;
    }
}

.about-comment {
    width: 100%;
    height: var(--screenHeight);
    min-height: 880px;
    background: #f2f4ec;
    display: flex;
    flex-direction: column;
    align-items: center;

    h2 {
        height: 52px;
        font-size: 48px;
        font-weight: bold;
        color: #000000;
        line-height: 52px;
        margin: 95px 0 80px;
    }

    .about-comment-content {
        width: 1080px;
        height: 520px;
        background: #ffffff;
        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.12);
        border-radius: 14px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;

        &::before {
            content: '';
            display: block;
            width: 48px;
            height: 38px;
            background-image: url('https://img.podpartner.com/static/images-20230202/about-footer-quotation.png');
            background-size: 100%;
            position: absolute;
            left: 104px;
            top: 130px;
        }

        &::after {
            content: '';
            display: block;
            width: 48px;
            height: 38px;
            background-image: url('https://img.podpartner.com/static/images-20230202/about-footer-quotation.png');
            background-size: 100%;
            position: absolute;
            transform: rotate(180deg);
            right: 104px;
            bottom: 140px;
        }

        .about-comment-content-tab {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: column;
            align-items: center;

            >figure {
                width: 0;
                height: 0;
                position: absolute;
                top: 0;
                left: 50%;
                transform: translate(-50%, -50%);
                opacity: 1;

                // transition: all 0.5s;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            h3 {
                opacity: 0;
                height: 20px;
                font-size: 20px;
                font-weight: bold;
                color: #000000;
                line-height: 20px;
                margin: 56px 0 6px;
            }

            h4 {
                opacity: 0;
                height: 16px;
                font-size: 14px;
                font-weight: 400;
                color: #555555;
                line-height: 16px;
            }

            p {
                width: 640px;
                margin-top: 74px;
                font-size: 18px;
                font-weight: 400;
                color: #000000;
                line-height: 40px;
                opacity: 0;
                transform: translateY(180px);
                transition: all 0.5s 0.5s;
            }

            &.comment-tab-show {
                z-index: 1;

                >figure {
                    width: 0;
                    height: 0;
                    animation: img-scala-show 0.5s ease-in-out 0.5s forwards;
                }

                h3,
                h4 {
                    opacity: 0;
                    animation: show-item 0.5s ease-in-out 0.6s forwards;
                }

                p {
                    opacity: 0;
                    transform: translateY(120px);
                    animation: text-trans-show 0.5s ease-in-out 0.5s forwards;
                }
            }

            &.comment-tab-hidden {
                >figure {
                    width: 88px;
                    height: 88px;
                    animation: hide-item ease-in-out 0.5s forwards;
                }

                h3,
                h4 {
                    animation: hide-item ease-in-out 0.5s forwards;
                }

                p {
                    opacity: 0;
                    animation: text-trans-hidden ease-in-out 0.5s forwards;
                }
            }
        }

        .about-comment-content-footer {
            width: 100%;
            height: 40px;
            position: absolute;
            bottom: 0;
            border-top: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            &>figure {
                height: 14px;
                position: relative;

                &::before {
                    content: '';
                    display: block;
                    width: 32px;
                    height: 1px;
                    border-bottom: 1px solid #f0f0f0;
                    position: absolute;
                    left: -36px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                &::after {
                    content: '';
                    display: block;
                    width: 32px;
                    height: 1px;
                    border-bottom: 1px solid #f0f0f0;
                    position: absolute;
                    right: -36px;
                    top: 50%;
                    transform: translateY(-50%);
                }

                img {
                    margin: 0 4px;
                    height: 14px;
                }
            }
        }
    }

    .about-comment-arrow {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 40px;

        &>svg {
            color: rgb(93, 105, 125);
            width: 18px;
            height: 18px;
            margin: 0 6px;
            cursor: pointer;

            &[sort='left'] {
                transform: rotate(90deg);
            }

            &[sort='right'] {
                transform: rotate(-90deg);
            }

            &:hover {
                color: #ea4c89;
            }
        }

        &>p {
            width: 6px;
            height: 6px;
            background: #cccccc;
            border-radius: 6px;
            margin: 0 12px;
            font-size: 0;

            &:hover,
            &.active {
                background: #ea4c89;
            }
        }
    }
}

@media (max-width: 960px) {
    .about-scroll {
        .about-header {
            .about-header-title {
                height: calc(100vh - 52px) !important;

                h2 {
                    font-size: 60px !important;
                    line-height: 60px !important;
                    height: auto !important;
                }

                .about-bg-circular {
                    --transformY: 76px;

                    p {
                        width: 84px;
                        height: 84px;
                    }
                }
            }

            .about-header-title-content {
                h3 {
                    font-size: 32px !important;
                    line-height: 32px !important;
                }

                p {
                    font-size: 14px !important;
                    line-height: 22px !important;
                }

                cite {
                    flex-direction: column !important;

                    figure {
                        max-width: 500px;
                        width: calc(100% - 40px) !important;
                        height: auto !important;
                        margin: 0 0 16px 0 !important;
                    }
                }

                ul {
                    max-width: 500px;
                    margin: 16px auto 0 !important;
                    padding: 12px 24px 0 !important;
                    justify-content: space-around !important;

                    li {
                        width: 120px !important;
                        margin: 12px 0 !important;
                        padding-left: 0 !important;

                        h4 {
                            font-size: 32px !important;
                            line-height: 42px !important;
                        }

                        p {
                            height: 54px !important;
                            font-size: 14px !important;
                            font-weight: 400 !important;
                            line-height: 18px !important;
                        }
                    }
                }
            }
        }

        .about-different {
            padding-top: 58px;

            dl {
                justify-content: space-around !important;
                margin: 0 !important;

                dt {
                    font-size: 24px !important;
                    line-height: 26px !important;
                    margin-bottom: 12px !important;
                }

                dd {
                    text-align: center;
                    width: 100% !important;
                    height: auto !important;
                    max-width: 344px;
                    min-height: 280px;
                    margin: 12px 12px 0 !important;
                    padding: 36px 12px 0 !important;

                    h4 {
                        font-size: 18px !important;
                        line-height: 24px !important;
                    }

                    figure {
                        margin: 0 auto;
                    }
                }
            }
        }

        .about-history {
            opacity: 1 !important;

            article {
                margin-top: 24px !important;
                padding: 0 14px !important;

                h2 {
                    width: 100% !important;
                    max-width: 332px;
                    font-size: 48px !important;
                }

                h3 {
                    width: 100% !important;
                    font-size: 24px !important;
                    line-height: 26px !important;
                }

                p {
                    width: 100% !important;
                    font-size: 14px !important;
                    line-height: 22px !important;
                }
            }

            .about-history-list {
                position: relative;
                margin-top: 30px;
                padding: 36px 14px 78px !important;
                align-items: flex-start !important;

                &::before {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 44px;
                    display: block;
                    border: 12px solid transparent;
                    border-top-color: #f6f6f6;
                }

                dl {
                    dt {
                        font-size: 24px !important;
                        line-height: 26px !important;

                        &::after {
                            font-size: 16px !important;
                            line-height: 18px !important;
                        }

                        &:nth-child(1) {
                            margin-bottom: 100px !important;
                        }

                        &:not(:nth-child(1)) {
                            margin-top: 80px !important;
                        }
                    }

                    dd {
                        margin-top: 32px !important;

                        strong {
                            font-size: 24px !important;
                            line-height: 26px !important;
                        }

                        p {
                            font-size: 16px !important;
                            line-height: 18px !important;
                        }
                    }
                }
            }
        }

        .about-culture {
            padding: 0 !important;
            box-sizing: border-box;
            height: calc(100vh - 52px) !important;
            min-height: 568px;
            overflow: hidden;

            h2 {
                font-size: 32px !important;
                line-height: 34px !important;
            }

            .about-bg-circular {
                --static-transformY: 106px !important;

                >.circular {
                    width: 118px !important;
                    height: 118px !important;

                    cite {
                        figure {
                            width: 38px !important;
                            height: 38px !important;
                        }

                        p {
                            font-size: 14px;
                            line-height: 16px;
                        }
                    }
                }
            }
        }
    }

    .about-environment {
        padding: 32px 14px 34px !important;

        cite {
            line-height: 26px !important;

            figure {
                width: 48px !important;
                height: 40px !important;
            }

            span {
                font-size: 16px !important;
                line-height: 26px !important;
            }
        }

        .about-photo-wall {
            position: relative;
            margin: 32px 0 0;
            height: 88vw;
            background-size: 96vw 88vw;
            margin: 80px 0 200px;

            &>svg {
                display: block;
                width: 100%;
                height: 100vw;
            }

            &>ul {
                margin: 0;
                position: absolute;
                top: 25%;
                width: 50%;

                &>li {
                    width: 33%;

                    figure {
                        width: 70%;
                        height: auto;
                    }

                    h4 {
                        display: none;
                    }

                    p {
                        display: none;
                    }
                }
            }
        }
    }

    .about-comment {
        box-sizing: border-box;
        padding: 0 14px 38px;
        min-height: auto;

        h2 {
            font-size: 18px;
            line-height: 20px;
            margin: 36px 0 30px;
        }

        .about-comment-content {
            padding-top: 20px;
            width: 100%;
            height: 308px;

            &::before {
                left: 24px;
                top: 84px;
                width: 18px;
                height: 14px;
            }

            &::after {
                width: 18px;
                height: 14px;
                right: 24px;
                bottom: 78px;
            }

            .about-comment-content-tab {
                &.comment-tab-show {
                    >figure {
                        width: 0;
                        height: 0;
                        animation: img-scala-show-web 0.5s ease-in-out 0.5s forwards;
                    }

                    h3,
                    h4 {
                        opacity: 0;
                        animation: show-item 0.5s ease-in-out 0.6s forwards;
                    }

                    p {
                        opacity: 0;
                        animation: text-trans-show-web 0.5s ease-in-out 0.5s forwards;
                    }
                }

                &.comment-tab-hidden {
                    >figure {
                        width: 40px;
                        height: 40px;
                        animation: hide-item ease-in-out 0.5s forwards;
                    }

                    h3,
                    h4 {
                        animation: hide-item ease-in-out 0.5s forwards;
                    }

                    p {
                        opacity: 0;
                        animation: text-trans-hidden-web ease-in-out 0.5s forwards;
                    }
                }

                width: 100%;

                h3 {
                    margin: 28px 0 4px;
                    font-size: 14px;
                    line-height: 16px;
                }

                h4 {
                    font-size: 12px;
                    line-height: 14px;
                }

                p {
                    box-sizing: border-box;
                    width: 100%;
                    margin-top: 32px;
                    padding: 0 56px;
                    font-size: 12px;
                    line-height: 18px;
                    transform: translateY(50px);
                }
            }
        }
    }
}
</style>
